<template>
    <div class="header">
        <!-- 设置头部信息 -->
        <a href="#/">
            <!-- 设置头部logo -->    
            <img class="logo" src="@/assets/etoak_logo.png" >
            <span class="company">ETOAK</span>
        </a>
    
        <!-- 此处使用了ElementUI的下拉菜单 -->
        <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
                下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-edit" command="a">修改密码</el-dropdown-item>
                <!-- 
                    Step3)
                    此处对应第三步退出系统
                    command的值对应函数中传递的值
                -->
                <el-dropdown-item icon="el-icon-s-fold" command="b">退出系统</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</template>

<script>
    export default{
        methods: {
            /* 这里的command对应  <el-dropdown-item command="对应这里">*/
            handleCommand(command) {
                switch (command) {
                    case 'a':
                        // 修改密码
                        this.$message(`点击修改密码`)
                        break;
                    case 'b':
                        // 退出系统
                        // const token = localStorage.getItem(etoak_cms_token')
                        localStorage.removeItem('etoak_cms_token')
                        localStorage.removeItem('etoak_cms_user')
                        this.$message.success('退出成功！！！')
                        // 回到登录页面
                        this.$router.push('/login')
                        break;
                    default:
                        break;
                }
            }
        }
    }
</script>

<style scoped>
    .logo{
        /* 垂直居中 */
        vertical-align: middle;
        padding: 0px 10px 0 40px;
        width:30px;
    }
    .company {
        position: absolute;
        color: white;
        font-weight:bolder;
    }
    /* 下拉菜单  注意组件名可以直接使用，会自带class属性 */
    .el-dropdown {
        float: right;
        margin-right: 50px;
    }
    .el-dropdown-link {
        color: white;
        cursor: pointer;
        font-weight: bolder;
    }
</style>